<template>
    <div class = "aging-management-box">

        <div class = "header-box">
            <el-button @click = "savePrescriptionBtnClick(true)">
                恢复默认配置&nbsp;&nbsp;
                <i class="fa fa-refresh" aria-hidden="true"></i>
            </el-button>
            <el-button @click = "savePrescriptionBtnClick(false)">
                保存配置&nbsp;&nbsp;
                <i class="fa fa-floppy-o" aria-hidden="true"></i>
            </el-button>
        </div>
        <div class = "center-box" v-if = "config">
            <h1>劳保用品&nbsp;<i class="fa fa-handshake-o" aria-hidden="true"></i></h1>
            <div class = "labor-box">
                <div class = "row-box" v-for="(item) in config.labor">
                    <span class = "col1 item-name">{{item.name}}有效期：</span>
                    <IndateInput v-model="item.indate"></IndateInput>
                </div>
            </div>
            <h1>证书&nbsp;<i class="fa fa-handshake-o" aria-hidden="true"></i></h1>
            <div class = "labor-box">
                <div class = "row-box" v-for="(item) in config.certificate">
                    <span class = "col1 item-name">{{item.name}}有效期：</span>
                    <IndateInput v-model="item.indate"></IndateInput>
                </div>
            </div>

            <h1>特殊权限&nbsp;<i class="fa fa-handshake-o" aria-hidden="true"></i></h1>
            <div>
                <el-checkbox v-model="config.others.staffManagementShow.value"
                             :label="config.others.staffManagementShow.name"
                             size="large"/>
            </div>
<!--下面的别删除以后可以打开直接用-->
<!--            <el-divider content-position="left"><span class = "title">证书</span></el-divider>-->
<!--            <div class = "certificate-box">-->
<!--    &lt;!&ndash;            <span class = "col1">证书名称</span><span>有效期</span>&ndash;&gt;-->
<!--                <div v-for="(item) in config.certificate">-->
<!--                    <p class = "col1 item-name">{{item.name}}:</p>-->
<!--                    <IndateInput v-model="item.indate"></IndateInput>-->
<!--                </div>-->
<!--            </div>-->

<!--            <el-divider content-position="left"><span class = "title">考试</span></el-divider>-->
<!--            <div class ="examination-box">-->
<!--    &lt;!&ndash;            <span class = "col1">考试名称</span><span>有效期</span>&ndash;&gt;-->
<!--                <div v-for="(item) in config.examination">-->
<!--                    <p class = "col1 item-name">{{item.name}}:</p>-->
<!--                    <IndateInput v-model="item.indate"></IndateInput>-->
<!--                </div>-->
<!--            </div>-->

<!--            <el-divider content-position="left"><span class = "title">其他设置</span></el-divider>-->
<!--            <div class ="other-config-box">-->
<!--                <div v-for="(item) in config.otherConfig" class = "row-box">-->
<!--                    <span class = "col1 item-name col2">{{item.name}}:</span>-->
<!--                    <el-input v-model="item.value">-->
<!--                        <template #append>-->
<!--                            <el-button @click = "exportPathBtnClick(item)">更改</el-button>-->
<!--                        </template>-->
<!--                    </el-input>-->
<!--                </div>-->
<!--            </div>-->


        </div>
    </div>
</template>

<script setup>
import {savePrescription} from "../api";
import {computed, ref, reactive, toRaw, watch, nextTick,h} from "vue";
import store from "../store";
import {debounce} from "lodash";
import dayjs from "dayjs";
import router from "../router";

let config = computed(()=>{
    return store.state.config.configObj;
});
let staffInfo = computed(()=>{
    return store.state.staffInfo;
})
let positionList = computed(()=>{
    return store.state.positionList;
})
let classList = computed(()=>{

    if(staffInfo.value.jurisdiction > 1){
        return store.state.classList;
    }else
    {
        return [{
            className: staffInfo.value.userName,
            classId: staffInfo.value.userNum
        }]
    }
});



let savePrescriptionBtnClick = debounce((defaultConfig)=>{
        if(config.value === null) return;
        if(defaultConfig === true){
            store.dispatch('config/saveDefaultConfigFun');
            router.go(0);
        }else {
            store.dispatch('config/savePrescriptionFun',config.value);
        }
    },500);

// let config = reactive( {
//     labor:{
//         antisquashyShoes: {name: "护趾鞋", indate: 63072000000},
//         helmet: {name: "安全帽", indate: 78624000000},
//         insulatedShoes: {name: "绝缘鞋", indate: 63072000000},
//         reflectiveVest: {name: "荧光衣", indate: 63072000000},
//     }
// })




</script>

<style scoped lang="scss">
.aging-management-box{
    background: #fff;
    padding: 10px;
    .header-box{
        padding-bottom: 10px;
        display: flex;
        justify-content: right;
        &>*{
            width: 300px;
        }
    }
    .center-box{
        width: 100%;
        height: calc(100vh - 120px);
        overflow: auto;
        h1{
            font-weight: bold;
            font-size: 16px;
            color: black;
        }
        .row-box{
            margin: 10px;
        }
    }
}
</style>
